<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作
		 append()           功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()          功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()            功能：在匹配元素集合中所有元素的外部后面插入内容
		 before()           功能：在匹配元素集合中所有元素的外部前面插入内容
		 
		 
		 
		 remove()
		 empty()
		 
		 replaceWith()
		 -->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				/* 鼠标改为手指 */
				cursor: pointer;
			}
			body{
				padding: 20px;
			}
			#target{
				border: 1px solid #ff4200;
				padding: 10px;
				margin-top: 10px;
				margin-left: 5px;
			}
			.boss{
				width:300px;
				height:300px;
				background-color:#ff0;
				border-radius:50%;
				background-image:url(../img/5.png);
				background-size:100% 100%;
				color:transparent;
				display:block;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!--html: 七个按钮  div包含p包含：目标元素的初始段落
		              div包含p包含：插入新元素的初始段落 id="newElement"隐藏
			css:  按钮：外边距5px 内边距：10px  15px  鼠标移动上去有手指显示
				  body:外边距20px  
				  #target：1个像素边框、内边距：10px 上外边距：10px
				  引入JQ
		 -->
		 <!-- 按钮 -->
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<!--        relpaceBtn -->
		<!-- 目标显示区域 -->
		<div id="target">
			<p>目标元素的初始段落</p>
		</div>
		<!-- 用于插入跟替换的区域 -->
		<div id="newElement" style="display: none;">
			<p>插入新元素的初始段落</p>
		</div>
		<script>
			/*1.点击：内部末尾插入元素  按钮  p文本后面追加新元素中包含内容操作*/
			$("#appendBtn").click(function(){
				//效果：点击按钮  追加新元素--自带内容
				//1.1  追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本,副本包含内部元素以及所有属性和属性值
				//1.2  自带属性和属性值：隐藏---改成显示
				cpe.css("display","block");
				//1.3将复制出来的新元素，追加给当前元素上
				$("#target").append(cpe);
			});
			/*2.点击  内部末尾插入元素  按钮  p文本后面追加新元素中包含内容操作 */
			$("#prependBtn").click(function(){
				//效果：点击按钮  追加新元素--自带内容
				//1.1  追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本,副本包含内部元素以及所有属性和属性值
				//1.2  自带属性和属性值：隐藏---改成显示
				cpe.css("display","block");
				//1.3将复制出来的新元素，追加给当前元素上
				$("#target").prepend(cpe);
			});
			/*3.点击  外部后面插入元素  按钮  p文本后面追加新元素中包含内容操作*/
			$("#afterBtn").click(function(){
				//效果：点击按钮  追加新元素--自带内容
				//1.1  追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本,副本包含内部元素以及所有属性和属性值
				//1.2  自带属性和属性值：隐藏---改成显示
				cpe.addClass('boss');
				//1.3将复制出来的新元素，追加给当前元素上
				$("#target").after(cpe);
			});
			/*4.点击  外部前面插入元素  按钮  生成  圆形，保留背景色，文本不需要，
			                                背景图300*300*/
			$("#beforeBtn").click(function(){
				//效果：点击按钮  追加新元素--自带内容
				//1.1  追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本,副本包含内部元素以及所有属性和属性值
				//1.2  自带属性和属性值：隐藏---改成显示
				cpe.css({
					"width":"300px",
				        "height":"300px",
						"background-color":"#ff0",
						"border-radius":"50%",
						"background-image":"url(../img/5.png)",
						"background-size":"100% 100%",
						"color":"transparent",
						"display":"block"
				});
				$("#target").before(cpe);
				});
				
				
				/*5.点击  删除元素 按钮 生成  圆形  保留背景色 文本不需要
				                                 背景图 300*300
				*/
				$("#removeBtn").click(function(){
					$("#target").remove();
					
					});
					
					/*6.点击 清空元素  按钮  页面上*/
				$("#emptyBtn").click(function(){
					$("#target").empty();
					
					});
				/*7.点击 替换元素  按钮  页面上目标元素替换为新元素 */
				$("#replaceBtn").click(function(){
					//克隆  新元素  #newElement【父子级】
					var c=$("#newElement").clone().css("display","block");
					//替换  新元素  替换  目标元素
					$("#target").replaceWith(c);
				});
		</script>
	</body>
</html>